<!--
 * @Author: your name
 * @Date: 2020-06-09 17:18:34
 * @LastEditTime: 2020-06-10 23:18:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \iem-web-projectd:\个人工具网站\www_admin_master\src\views\system\role.vue
-->
<template>
  <div>
    <u-table :table-data="tableData" :total="total" @handle-current-change="handleCurrentChange" @handle-size-change="handleSizeChange">
      <template slot="TableHead">
        <el-button size="medium" @click="addRole">创建角色</el-button>
      </template>
      <template slot="TableBody">
        <el-table-column label="角色名称">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="creat_time" />
        <el-table-column label="备注" prop="remarks" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </template>
    </u-table>
    <!-- 打开弹窗 -->
    <el-dialog :title="uDialog.title" :visible.sync="uDialog.dialogFormVisible">
      <el-form :model="form" label-position="top">
        <el-row>
          <el-col :span="12">
            <el-form-item label="请输入角色" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.remarks" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-form-item label="备注" :label-width="uDialog.formLabelWidth">
              <el-tree
                ref="tree"
                :data="treeData"
                show-checkbox
                node-key="page_id"
                highlight-current
                :props="defaultProps"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uDialog.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UTable from '@/components/UTable'
import { FIND_ROLE_ALL_INFO, UPDATE_ROLE_INFO, DELETE_ROLE_INFO } from '@/api/system'
import { FIND_ALL_PAGE_INFO } from '@/api/system'
export default {
  components: {
    UTable
  },
  data () {
    return {
      tableData: [],
      total: 20,
      currentPage: 1,
      uDialog: {
        dialogFormVisible: false,
        title: '',
        formLabelWidth: '120px'
      },
      form: {},
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  mounted () {
    this.findAllRoleInfo()
    this.findPageAllInfo()
  },
  methods: {
    // 获得所有角色信息
    async findAllRoleInfo () {
      const res = await this.$post(FIND_ROLE_ALL_INFO, {
        'pageSize': '10',
        'currentPage': '1'
      })
      console.debug('查询所有信息', res)
      this.total = res.count
      this.tableData = res.rows
    },
    // 编辑按钮
    handleEdit (row) {
      this.uDialog.title = '编辑角色'
      this.uDialog.dialogFormVisible = true
      this.form = row
      const data = JSON.parse(row.routes)
      console.debug('数据点', data)
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(data)
      })
    },
    handleDelete (row) {
      console.log('删除', row)
      this.$confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRoleInfo(row.role_id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除角色信息函数
    async deleteRoleInfo (data) {
      const info = { role_id: data }
      const res = await this.$post(DELETE_ROLE_INFO, info)
      if (res) {
        this.findAllRoleInfo()
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 创建角色按钮
    addRole () {
      this.uDialog.title = '添加角色'
      this.form = {}
      this.uDialog.dialogFormVisible = true
    },
    // 编辑角色请求函数
    updateRole (data) {
      this.$post(UPDATE_ROLE_INFO, data).then(res => {
        this.findAllRoleInfo()
      })
    },
    // 提交编辑信息
    handleAddForm () {
      this.uDialog.dialogFormVisible = false
      const arr = this.$refs.tree.getCheckedNodes()
      const data = arr.map(item => {
        if (item.children) {
          return {
            class_name: item.class_name,
            creat_time: item.creat_time,
            icon: item.icon,
            name: item.name,
            page_id: item.page_id,
            parent_id: item.parent_id,
            router: item.router
          }
        }
        return item
      })
      this.form.routes = JSON.stringify(data)
      this.updateRole(this.form)
    },
    // 查询页面节点信息
    async findPageAllInfo () {
      const res = await this.$post(FIND_ALL_PAGE_INFO, {})
      const pageArr = [] // 一级
      for (const item of res) {
        if (item.parent_id === -1) {
          pageArr.push(item)
        }
      }
      for (const item of pageArr) {
        item.children = []
        for (const index of res) {
          if (index.parent_id === item.page_id) {
            item.children.push(index)
          }
        }
      }
      this.treeData = pageArr
    }
  }
}
</script>
<style lang="scss">
.main-title {
 height: 40px;
}
.pagination-padding {
  padding: 20px 0;
}
</style>
